useContext

在组件的顶层调用 useContext 来读取和订阅 context。

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext(null);

export default function MyApp() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <Panel title="Welcome">{/* ... */}</Panel>
    </ThemeContext.Provider>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = "panel-" + theme;

  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  );
}